<style scoped>
.siteinfo /deep/ .el-tabs__header .el-tabs__nav-wrap {
  padding-left: 30px;
}
.siteinfo /deep/ .el-tabs__header .el-tabs__item {
  font-size: 16px;
  padding:0 30px;
}
.siteinfo /deep/ .el-tabs__header .el-tabs__item:nth-child(2) {
  padding-left: 0;
}
.siteinfo /deep/ .el-tabs__header .el-tabs__item:last-child {
  padding-right: 0;
}
.siteinfo .el-collapse {
  border-top: 0;
}
.siteinfo .tempalte-title {
  font-weight: bold;
  color: #353535;
  font-size: 15px;
}
.siteinfo .active {
  color: #409eff;
}
</style>
<!--  -->
<template>
  <div class="siteinfo">
    <el-tabs v-model="activeNames" @tab-click="handleChange">
      <el-tab-pane label="LOGO 设置" name="1">
        <CollapseLogoSetup />
      </el-tab-pane>
      <el-tab-pane label="基本信息" name="2">
        <CollapseHostInfoSetup />
      </el-tab-pane>
      <el-tab-pane label="导航设置" name="3">
        <CollapseSiteMenuSetup />
      </el-tab-pane>
      <!-- <el-tab-pane label="背景音乐" name="4">
        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
      </el-tab-pane> -->
    </el-tabs>
    <!-- <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="LOGO 设置" name="1">
        <template slot="title">
          <div :class="{'tempalte-title': true, 'active': activeNames.indexOf('1') > -1}"><i
              class="header-icon el-icon-info"></i>&nbsp;&nbsp;LOGO 设置</div>
        </template>
        <CollapseLogoSetup />
      </el-collapse-item>
      <el-collapse-item title="基本信息" name="2">
        <template slot="title">
          <div :class="{'tempalte-title': true, 'active': activeNames.indexOf('2') > -1}"><i
              class="header-icon el-icon-info"></i>&nbsp;&nbsp;基本信息</div>
        </template>
        <CollapseHostInfoSetup />
      </el-collapse-item>
      <el-collapse-item title="导航设置" name="3">
        <template slot="title">
          <div :class="{'tempalte-title': true, 'active': activeNames.indexOf('3') > -1}"><i
              class="header-icon el-icon-info"></i>&nbsp;&nbsp;导航设置</div>
        </template>
        <CollapseSiteMenuSetup />
      </el-collapse-item>
      <el-collapse-item title="背景音乐" name="4">
        <template slot="title">
          <div :class="{'tempalte-title': true, 'active': activeNames.indexOf('4') > -1}"><i
              class="header-icon el-icon-info"></i>&nbsp;&nbsp;背景音乐 </div>
        </template>
        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
      </el-collapse-item>
    </el-collapse> -->
    <div style="height: 18px;"></div>
  </div>
</template>

<script>
import CollapseLogoSetup from '@/components/main/user/siteinfo/CollapseLogoSetup.vue'
import CollapseHostInfoSetup from '@/components/main/user/siteinfo/CollapseHostInfoSetup.vue'
import CollapseSiteMenuSetup from '@/components/main/user/siteinfo/CollapseSiteMenuSetup.vue'
export default {
  data () {
    return {
      activeNames: '1'
    }
  },
  methods: {
    handleChange (val) {
    }
  },
  components: {
    CollapseLogoSetup,
    CollapseHostInfoSetup,
    CollapseSiteMenuSetup
  }
}

</script>
